<!DOCTYPE html>
<html lang="en">

<div th:include="common/headjs :: 1024Headerjs"></div>

<body data-type="index">
    <div class="am-g tpl-g" id="app">

        <div id="groupDetailDiv" style="display: none">
            <table width="100%" style="background-color: white">
                <tr>
                    <td>用户名</td>
                    <td>邮箱</td>
                </tr>
                <tr v-for="user in users">
                    <td>{{user.username}}</td>
                    <td>{{user.email}}</td>
                </tr>
            </table>
        </div>

        <!-- 头部 -->
        <div th:include="common/head :: 1024Header"></div>

        <!-- 风格切换 -->
        
        <!-- 侧边导航栏 -->
        <div th:include="common/left :: 1024Left"></div>

        <!-- 内容区域 -->
        <div class="tpl-content-wrapper">

            <div class="row-content am-cf">
                <div class="row  am-cf">
                    
                    <div class="row">

                    <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
                        <div class="widget am-cf">
                            <div class="widget-head am-cf">
                                <div class="widget-title am-fl">流水操作</div>
                                <div class="widget-function am-fr">
                                    <a href="javascript:;" class="am-icon-cog"></a>
                                </div>
                            </div>
                            <div class="widget-body am-fr">

                                <form class="am-form tpl-form-line-form">


                                <div class="am-form-group">
                                        <label for="user-phone" class="am-u-sm-3 am-form-label">小组状态 <span class="tpl-form-line-small-title"></span></label>
                                        <div class="am-u-sm-9">
                                            <select  v-model="groupStatus">
                                                  <option value="-1">请选择小组状态</option>
                                                  <option value="1">已成立</option>
                                                  <option value="2">已解散</option>
                                            </select>

                                        </div>

                                    </div>
                                    

                                    <div class="am-form-group">
                                        <label for="user-name" class="am-u-sm-3 am-form-label">小组名称(可选) <span class="tpl-form-line-small-title"></span></label>
                                        <div class="am-u-sm-9">
                                            <input type="password" class="tpl-form-input" id="user-name" placeholder="请输入6位银行卡密码">
                                            <small></small>
                                        </div>
                                    </div>

                                    <div class="am-form-group">
                                        <div class="am-u-sm-9 am-u-sm-push-3">
                                            <button type="button" class="am-btn am-btn-primary tpl-btn-bg-color-success " v-on:click="loadGroups">查询</button>
                                        </div>
                                    </div>

                                </form>



                                <div class="widget am-cf">
                            <div class="widget-head am-cf">
                                <div class="widget-title am-fl"></div>
                                <div class="widget-function am-fr">
                                   
                                </div>
                            </div>
                            <div class="widget-body  widget-body-lg am-fr">

                                <table width="100%" class="am-table am-table-compact am-table-striped tpl-table-black " id="example-r">
                                    <thead>
                                        <tr>
                                            <th>小组ID</th>
                                            <th>小组人数</th>
                                            <th>成立时间</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr class="gradeX" v-for="xx in groups">
                                            <td>{{xx.id}}</td>
                                            <td>{{xx.groupNum}}</td>
                                            <td>{{xx.createTime}}</td>
                                            <td>
                                                <a href="###" v-on:click="detailGroup(xx.id)">查看详情</a>&nbsp;
                                                <a href="###" v-on:click="dismiss(xx.id)">解散</a>&nbsp;
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>

                                <ul class="am-pagination">
                                  <li><a href="###" v-on:click="firstPage">首页 &raquo;</a></li>
								  <li><a href="###" v-on:click="prePage">&laquo; 上一页</a></li>
								  <li><a href="###" v-on:click="nextPage">下一页 &raquo;</a></li>
								  <li><a href="###" v-on:click="lastPage">尾页 &raquo;</a></li>
								  								<li>{{currentPage}}/{{totalPage}}
         
        							</li>
								</ul>



                            </div>
                        </div>





                            </div>

                        </div>
                    </div>
                </div>

                </div>

                </div>

            </div>
        </div>
    </div>
    </div>







</body>



<script>
    new Vue({
        'el' : '#app',
        data : {
            groups : [],
            groupStatus : 1,
            currentPage : 1,
            totalPage : 0,
            users : []
        },
        created : function () {
            // this.loadGroups();
        },
        methods : {
            loadGroups : function () {
                let that = this;
                axios.get('/group/queryGroup?currentPage='+that.currentPage+'&status=' + that.groupStatus)
                    .then(function (response) {
                        that.groups = response.data.data.data;
                        that.totalPage = response.data.data.totalPageNumber;
                    });
            },
            nextPage : function () {
                if (this.currentPage == this.totalPage) {
                    return;
                }
                this.currentPage ++;
                this.loadGroups();
            },
            prePage : function () {
                if (this.currentPage == 1) {
                    return;
                }
                this.currentPage --;
                this.loadGroups();
            },
            firstPage : function () {
                this.currentPage = 1;
                this.loadGroups();
            },
            lastPage : function () {
                this.currentPage = this.totalPage;
                this.loadGroups();
            },
            detailGroup : function (groupId) {
                let that = this;
                axios.get('/group/groupDetail/'+ groupId)
                    .then(function (response) {
                        that.users = response.data.data;
                    });

                layer.open({
                    type: 1,
                    skin: 'layui-layer-rim', //加上边框
                    area: ['420px', '240px'], //宽高
                    content: $('#groupDetailDiv')
                });
            },
            dismiss : function (groupId) {
                let that = this;
                axios.post('/group/dismiss/'+ groupId, {
                }).then(function (response) {
                        if (response.data.code != 1000) {
                            alert(response.data.msg);
                            return;
                        }
                        alert('解散成功');
                    })
            }
        }
    })

</script>

</html>